<template>
    <div class="navigation-bar">
        <span class="initiator">
            <div class="logo-content">
                <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;">
                    <img src="../assets/img/logo.png" style="height:50px;" alt="" />
                    <div class="logo-text">
                        <h3>融销通</h3>
                        <div style="font-size:12px;margin-top:5px;color: #666;">
                            全国农产品融销一体平台
                        </div>
                    </div>
                </div>

            </div>
            <div class="userin" v-if="store.state.loginUserNickname == ''">
                <span @click="router.push({ path: '/login' })" class="login">登录</span> |
                <span @click="router.push({ path: '/register' })" class="register">注册</span>
            </div>
            <div v-else>
                <img :src=store.state.avatar alt="图片未加载成功" @click="" class="avatar" />
            </div>
        </span>

        <div class="menu-content" v-cloak>
            <el-menu :default-active="activeIndex" mode="horizontal" background-color="#668d2f" text-color="#fff"
                active-text-color="#fff" id="menu" @select="handleSelect">
                <el-menu-item index="/index/front" class="item" @click="router.push('/index/front')">首页</el-menu-item>
                <el-menu-item index="/index/goods" class="item" @click="router.push('/index/goods')">商品货源</el-menu-item>
                <el-menu-item index="/index/purchase" class="item"
                    @click="router.push('/index/purchase')">求购需求</el-menu-item>
                <el-menu-item index="/index/knowledge" class="item"
                    @click="router.push('/index/knowledge')">农业知识</el-menu-item>
                <el-menu-item index="/index/guide" class="item" @click="router.push('/index/guide')">专家指导</el-menu-item>
                <el-menu-item index="/index/shopcart" class="item"
                    @click="router.push('/index/shopcart')">购物车</el-menu-item>
                <el-menu-item index="/index/financing"
                    @click.native="router.push('/index/financing')">融资申请</el-menu-item>
                <div class="userin" v-if="store.state.loginUserNickname == ''">
                </div>
                <el-submenu index="8" v-else>
                    <template #title>设置</template>
                    <!--   -->
                    <el-menu-item index="index/user" @click.native="router.push('/index/user')">个人中心</el-menu-item>
                    <el-menu-item index="8-3" @click="router.push('/index/user/user_info')"
                        v-if="store.getters.isAdmin">用户管理</el-menu-item>
                    <el-menu-item index="/index/about_us"
                        @click.native="router.push('/index/about_us')">关于我们</el-menu-item>
                    <el-menu-item index="8-6" @click.native="loginOut">退出</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</template>

<script setup lang="ts">
import store from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { ref } from 'vue'
const router = useRouter()
const route = useRoute()
import { getAuthorInfo } from '@/api/user'
import { ElMessage } from 'element-plus'


//自动执行
const load = () => {
    store.commit("updateActiveIndex", "1")
    getAuthorInfo().then(res => {
        if (res.flag) {
            store.state.avatar = res.data.avatar
            store.state.loginInfo = res.data
        } else {
            ElMessage.error(res.data)
        }
    })
}
load()

const activeIndex = ref(route.path);
//退出登录
const loginOut = () => {
    store.commit('updateLoginUserNickname', '');
    store.commit('removeStorage');
    store.commit('resetState')
    router.push({ path: '/index' });
}


const handleSelect = (key: string, keyPath: string[]) => {
    activeIndex.value = key
}

</script>

<style lang="scss" scoped>
.avatar {
    float: left;
    width: 45px;
    height: 45px;
    margin-left: 150px;
    border-radius: 50%;
}

.navigation-bar {
    width: 100%;

    .initiator {
        width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #035D1C;
        padding: 5px 20px;

        .logo-content {
            color: #035D1C;
            text-align: center;

            .logo-text {
                margin-left: 10px;
                font-size: 16px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                font-weight: bold;
                // justify-content: flex-start;
            }
        }
    }

    .menu-content {
        height: 42px;
        background-color: #668d2f !important;
    }

    .el-menu {
        width: 1100px;
        margin: 0 auto;
        height: 40px;

        .el-menu-item {
            background-color: #668d2f !important;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            margin-right: 34px;
        }

        .el-submenu {
            .template {
                background-color: #668d2f !important;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
            }

            .el-submenu__title {
                line-height: 40px;
                height: 40px;
                background-color: #668d2f;
            }

            .el-menu-item {
                background-color: #668d2f !important;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
            }

            background-color: #668d2f !important;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }
    }

    .login {
        cursor: pointer;
    }

    .register {
        cursor: pointer;
    }
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
}


[v-cloak] {
    display: none;
}
</style>